<template>
<!-- 1.组件包含的标签的内容 -->
<!-- template只是支持一个根标签通常都是写一个div在里面写多个标签 -->
<div class="demo">
    <h2>学校名称:{{name}}</h2>
    <h2>学校地址:{{address}}</h2>
    <button @click="show()">点我</button>

</div>    
</template>



<script>
// 2.当前页面需要用到的js脚本  此处的js需要导出
// const option ={}
// export default option
export default{
    name:'School',//xxx.vue的名字 如果没有默认是文件名
    data(){
        return{
            name:'清华大学',
            address:'北京市海淀区中关村'
        }
    },
    methods:{
        show(){
            alert('你点击了我')
        }
    }

}




</script>


<style scoped> /* scoped局部作用域css只是在当前页面有效 */

/* 3.对应标签的的css样式 只有less sass预编译css预处理器 */
.demo{
    background-color: orange;
}
    
</style>

